<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/蓝铅笔/iconfont.css">
    <link rel="stylesheet" href="./font/play/iconfont.css">
    <link rel="stylesheet" href="font/响应式底部/iconfont.css">
    <link rel="stylesheet" href="./CSS/reset.css">
    <link rel="stylesheet" href="./CSS/normalize.css">
    <link rel="stylesheet" href="./CSS/蓝铅笔头部-移动端.css">
    <link rel="stylesheet" href="./CSS/蓝铅笔尾部-移动端.css">
    <link rel="stylesheet" href="./CSS/蓝铅笔社区-移动端.css">
<body>
    <div class="header-box">
        <div class="header1">
            <div class="header-heart">
                <div class="logo">
                   <a href="#"><img src="./蓝铅笔漫步images/logo.png" alt=""></a> 
                </div>
                <div class="search">
                   <a href="#"><i class="iconfont icon-sousuo"></i></a> 
                </div>
                <div class="login">
                  <div class="login-box">
                    <div class="login-img">
                        <img src="./蓝铅笔漫步images/1.png" alt="">
                    </div>
                    <div class="login-font">
                        <a href="#">登录</a>
                        <a href="#">注册</a>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
    <div class="adv-box">
        <div class="adv">
            <a href="#"><img src="./蓝铅笔漫步images/164.png" alt=""></a>
        </div>
    </div>
    <div class="nav-content-box">
    <div class="nav-content">
        <ul class="nav-content-ul">
            <li class="nav-content-ul-li">
                <a href="#">
                    作业
                </a>
            </li>
            <li class="nav-content-ul-li">
                <a href="#">
                    问答
                </a>
            </li>
            <li class="nav-content-ul-li">
                <a href="#">
                    动态
                </a>
            </li>
            <li class="nav-content-ul-li">
                <a href="#">
                    指绘
                </a>
            </li>
        </ul>
    </div>
</div>
    <div class="comments">
        <div class="comments-heart">
            <ul class="comments-heart-ul">
                <li class="comments-heart-ul-li">
                    <div class="chul-title">
                        <a href="#">
                            <img src="./蓝铅笔漫步images/42.jpg" alt="">
                            <span>空白橘</span>
                        </a>
                    </div>
                    <div class="chul-middle">
                        <a href="#">
                            <img src="./蓝铅笔漫步images/32.png" alt="">
                        </a>
                    </div>
                    <div class="chul-bottom">
                       <div class="teacher">
                         <a href="#" class="teacher-people">
                            <img src="./蓝铅笔漫步images/42.jpg" alt="">
                            <span>雨眠</span>
                            <img src="./蓝铅笔漫步images/175.png" alt="">
                         </a>
                         <a href="#" class="teacher-play">
                            <i class="iconfont icon-bofang"></i>
                            <span>辅导视频 </span>
                         </a>
                       </div>
                       <div class="opinion">
                          <p>画的不错，这里注意一下它的一些颜色是用混合模式里面的效果去做的，不一定要手动涂出来，继续加油吧</p>
                          <a href="#">展开</a>
                       </div>
                    </div>
                </li>
                <li class="comments-heart-ul-li">
                    <div class="chul-title">
                        <a href="#">
                            <img src="./蓝铅笔漫步images/42.jpg" alt="">
                            <span>空白橘</span>
                        </a>
                    </div>
                    <div class="chul-middle">
                        <a href="#">
                            <img src="./蓝铅笔漫步images/145.png" alt="">
                        </a>
                    </div>
                    <div class="chul-bottom">
                       <div class="teacher">
                         <a href="#" class="teacher-people">
                            <img src="./蓝铅笔漫步images/42.jpg" alt="">
                            <span>雨眠</span>
                            <img src="./蓝铅笔漫步images/175.png" alt="">
                         </a>
                         <a href="#" class="teacher-play">
                            <i class="iconfont icon-bofang"></i>
                            <span>辅导视频 </span>
                         </a>
                       </div>
                       <div class="opinion">
                          <p>画的不错，这里注意一下它的一些颜色是用混合模式里面的效果去做的，不一定要手动涂出来，继续加油吧</p>
                          <a href="#">展开</a>
                       </div>
                    </div>
                </li>
                <li class="comments-heart-ul-li">
                    <div class="chul-title">
                        <a href="#">
                            <img src="./蓝铅笔漫步images/42.jpg" alt="">
                            <span>空白橘</span>
                        </a>
                    </div>
                    <div class="chul-middle">
                        <a href="#">
                            <img src="./蓝铅笔漫步images/146.png" alt="">
                        </a>
                    </div>
                    <div class="chul-bottom">
                       <div class="teacher">
                         <a href="#" class="teacher-people">
                            <img src="./蓝铅笔漫步images/42.jpg" alt="">
                            <span>雨眠</span>
                            <img src="./蓝铅笔漫步images/175.png" alt="">
                         </a>
                         <a href="#" class="teacher-play">
                            <i class="iconfont icon-bofang"></i>
                            <span>辅导视频 </span>
                         </a>
                       </div>
                       <div class="opinion">
                          <p>画的不错，这里注意一下它的一些颜色是用混合模式里面的效果去做的，不一定要手动涂出来，继续加油吧，这里注意一下它的一些颜色是用混合模式里面的效果去做的，不一定要手动涂出来，继续加油吧</p>
                          <a href="#">展开</a>
                       </div>
                    </div>
                </li>
                <li class="comments-heart-ul-li">
                    <div class="chul-title">
                        <a href="#">
                            <img src="./蓝铅笔漫步images/42.jpg" alt="">
                            <span>空白橘</span>
                        </a>
                    </div>
                    <div class="chul-middle">
                        <a href="#">
                            <img src="./蓝铅笔漫步images/147.png" alt="">
                        </a>
                    </div>
                    <div class="chul-bottom">
                       <div class="teacher">
                         <a href="#" class="teacher-people">
                            <img src="./蓝铅笔漫步images/42.jpg" alt="">
                            <span>雨眠</span>
                            <img src="./蓝铅笔漫步images/175.png" alt="">
                         </a>
                         <a href="#" class="teacher-play">
                            <i class="iconfont icon-bofang"></i>
                            <span>辅导视频 </span>
                         </a>
                       </div>
                       <div class="opinion">
                          <p>画的不错，这里注意一下它的一些颜色是用混合模式里面的效果去做的，不一定要手动涂出来，继续加油吧</p>
                          <a href="#">展开</a>
                       </div>
                    </div>
                </li>
                <li class="comments-heart-ul-li">
                    <div class="chul-title">
                        <a href="#">
                            <img src="./蓝铅笔漫步images/42.jpg" alt="">
                            <span>空白橘</span>
                        </a>
                    </div>
                    <div class="chul-middle">
                        <a href="#">
                            <img src="./蓝铅笔漫步images/148.png" alt="">
                        </a>
                    </div>
                    <div class="chul-bottom">
                       <div class="teacher">
                         <a href="#" class="teacher-people">
                            <img src="./蓝铅笔漫步images/42.jpg" alt="">
                            <span>雨眠</span>
                            <img src="./蓝铅笔漫步images/175.png" alt="">
                         </a>
                         <a href="#" class="teacher-play">
                            <i class="iconfont icon-bofang"></i>
                            <span>辅导视频 </span>
                         </a>
                       </div>
                       <div class="opinion">
                          <p>画的不错，这里注意一下它的一些颜色是用混合模式里面的效果去做的，不一定要手动涂出来，继续加油吧</p>
                          <a href="#">展开</a>
                       </div>
                    </div>
                </li>
                <li class="comments-heart-ul-li">
                    <div class="chul-title">
                        <a href="#">
                            <img src="./蓝铅笔漫步images/42.jpg" alt="">
                            <span>空白橘</span>
                        </a>
                    </div>
                    <div class="chul-middle">
                        <a href="#">
                            <img src="./蓝铅笔漫步images/149.png" alt="">
                        </a>
                    </div>
                    <div class="chul-bottom">
                       <div class="teacher">
                         <a href="#" class="teacher-people">
                            <img src="./蓝铅笔漫步images/42.jpg" alt="">
                            <span>雨眠</span>
                            <img src="./蓝铅笔漫步images/175.png" alt="">
                         </a>
                         <a href="#" class="teacher-play">
                            <i class="iconfont icon-bofang"></i>
                            <span>辅导视频 </span>
                         </a>
                       </div>
                       <div class="opinion">
                          <p>画的不错，这里注意一下它的一些颜色是用混合模式里面的效果去做的，不一定要手动涂出来，继续加油吧</p>
                          <a href="#">展开</a>
                       </div>
                    </div>
                </li>
                <li class="comments-heart-ul-li">
                    <div class="chul-title">
                        <a href="#">
                            <img src="./蓝铅笔漫步images/42.jpg" alt="">
                            <span>空白橘</span>
                        </a>
                    </div>
                    <div class="chul-middle">
                        <a href="#">
                            <img src="./蓝铅笔漫步images/150.png" alt="">
                        </a>
                    </div>
                    <div class="chul-bottom">
                       <div class="teacher">
                         <a href="#" class="teacher-people">
                            <img src="./蓝铅笔漫步images/42.jpg" alt="">
                            <span>雨眠</span>
                            <img src="./蓝铅笔漫步images/175.png" alt="">
                         </a>
                         <a href="#" class="teacher-play">
                            <i class="iconfont icon-bofang"></i>
                            <span>辅导视频 </span>
                         </a>
                       </div>
                       <div class="opinion">
                          <p>画的不错，这里注意一下它的一些颜色是用混合模式里面的效果去做的，不一定要手动涂出来，继续加油吧</p>
                          <a href="#">展开</a>
                       </div>
                    </div>
                </li>

            </ul>
        </div>
    </div>
    <div class="small-mask-box">
        <div class="small-mask">
           <div class="small-mask-heart">
               <ul class="small-mask-heart-ul">
                   <li class="small-mask-heart-ul-li">
                       <a href="./蓝铅笔首页-移动端.html">
                           <p><i class="iconfont icon-shouye-shouye"></i></p>
                           <p><span>首页</span></p>
                       </a>
                   </li>
                   <li class="small-mask-heart-ul-li">
                       <a href="./蓝铅笔移动端-教程.html">
                           <p><i class="iconfont icon-diannao"></i></p>
                           <p><span>教程</span></p>
                       </a>
                   </li>
                   <li class="small-mask-heart-ul-li">
                       <a href="./蓝铅笔网校-移动端.html">
                           <p><i class="iconfont icon-wenzhang"></i></p>
                           <p><span>网校</span></p>
                       </a>
                   </li>
                   <li class="small-mask-heart-ul-li">
                       <a href="./蓝铅笔大触-移动端.html">
                           <p><i class="iconfont icon-chengshijinglixianxing"></i></p>
                           <p><span>大触</span></p>
                       </a>
                   </li>
                   <li class="small-mask-heart-ul-li">
                       <a href="./蓝铅笔移动端-社区.html">
                           <p><i class="iconfont icon-taolun"></i></p>
                           <p><span>社区</span></p>
                       </a>
                   </li>
               </ul>
           </div>
        </div>
       </div>
       <div class="app">
         <a href="#">在APP内打开</a>
       </div>
</body>
</html>